<template>
  <div class="container">
    <h1>
      新闻管理
      <button @click="isShow=!isShow" class="btn btn-success pull-right">新增</button>
    </h1>
    <hr />
    <!-- 新闻搜索 -->
    <div class="well">
      <div class="form-group">
        <input type="text" placeholder="请输入搜索关键词" class="form-control" />
      </div>
    </div>
    <!-- 新闻列表 -->
    <div class="well">
      <table class="table table-hover">
        <thead>
          <tr class="active">
            <td>ID</td>
            <td>标题</td>
            <td>内容</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in 5" :key="item">
            <td>ID</td>
            <td>标题</td>
            <td>内容</td>
            <td>
              <button class="btn btn-success btn-sm">编辑</button>
              &nbsp;
              <button class="btn btn-danger btn-sm">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 模态框(新增/编辑) -->
    <div class="modal-dialog" v-if="isShow">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">新增</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <input type="text" placeholder="标题" class="form-control" />
          </div>
          <div class="form-group">
            <textarea cols="30" style="resize:none" rows="2" placeholder="内容" class="form-control"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">保存</button>
          <button type="button" class="btn btn-default">取消</button>
        </div>
      </div>
    </div>
    <!-- 模态框(新增/编辑) -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    };
  }
};
</script>

<style>
.modal-dialog{
    position: fixed!important;
    display: block;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    margin:auto;
}
</style>